<%--
  Created by IntelliJ IDEA.
  User: 晓东√
  Date: 2024/9/5 0005
  Time: 8:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>编辑书籍</title>
    <script src='${pageContext.request.contextPath}/js/jquery.js'></script>
</head>
<body>
<div>
    <div><h2 id="tt">新增图书</h2></div>
    <div>
        <form>
            <input hidden="hidden" id="bookId">
            <div>书籍名称：<input type="text" placeholder="请输入书籍名称" id="bookName" name="bookName"></div>
            <div>作者：<input type="text" placeholder="请输入作者" id="author" name="author"></div>
            <div>出版社：<input type="text" placeholder="请输入出版社" id="publisher" name="publisher"></div>
            <div>出版时间：<input type="date" placeholder="请输入出版时间" id="publishDate" name="publishDate"></div>
            <div>数量：<input type="number" placeholder="请输入数量" id="stockQuantity" name="stockQuantity"></div>
            <div>描述：<input type="text" placeholder="请输入描述" id="description" name="description"></div>
            <div>封面：<input type="file" id="coverImage" name="coverImage"></div>
            <div><img id="img"></div>
            <div>
                <button onclick="save()">提交</button>
            </div>
        </form>
    </div>
</div>
</body>
</html>
<script>

    //页面加载时，判断是否有id 有获取详情
    $(function () {
        let id =sessionStorage.getItem('id');
        console.log(id);
        if (id != '') {
            $('#tt').text('编辑图书');
            $('#bookId').val(id);
            //获取详情
            detail(id);
        }
    })

    /*详情*/
    function detail(id) {
        let opr = 'detail';
        let data={
            id,
            opr
        }
        $.ajax({
            url: '/book.action',
            type: 'post',
            data: data,
            dataType: 'json',
            success: bookDetail,
            error: function () {
                alert("查询失败!请联系管理员");
            }
        })
    }

    function bookDetail(data) {
        console.log(data);
        $("#bookName").val(data.bookName);
        $("#author").val(data.author);
        $("#publisher").val(data.publisher);
        $("#publishDate").val(data.publishDate);
        $("#stockQuantity").val(data.stockQuantity);
        $("#description").val(data.description);
        if(data.coverImage!=null){
            $('#img').attr('src', data.coverImage);
        }
    }

    //点击保存 传递数据到服务器
    function save() {
        //阻止默认行为
        event.preventDefault();
        let opr = 'edit';
        let bookId = $('#bookId').val();
        let bookName = $("#bookName").val();
        let author = $("#author").val();
        let publisher = $("#publisher").val();
        let publishDate = $("#publishDate").val();
        let stockQuantity = $("#stockQuantity").val();
        let description = $("#description").val();
        //头像
        let coverImage = $('#coverImage')[0].files[0];
        let book = {bookId,opr, bookName, author, publisher, publishDate, stockQuantity, description, coverImage}

        let formData = new FormData();

        $.each(book, function (key, value) {
            formData.append(key, value);
        })
        $.ajax({
            url: '/book.action',
            type: 'post',
            data: formData,
            dataType: 'json',
            processData: false,   // 告诉jQuery不要处理数据
            contentType: false,   // 告诉jQuery不要设置Content-Type头部
            success: function (resq) {
                if (resq.code == 200) {
                    //
                    alert("编辑成功！！");
                    //清空表单数据
                    //跳转到书籍列表页面
                    window.location.href = 'Book.jsp';
                }
            },
            error: function () {
                alert("新增失败!请联系管理员");
                //清空表单数据
            }
        })
    }


    /*图片预览功能*/
    $("#coverImage").on('change', function () {
        let file = this.files[0];
        // 进一步防止文件类型错误
        if (!/image\/\w+/.test(file.type)) {
            alert("看清楚，这个需要图片！");
            return false;
        }
        $('#img').attr('src', URL.createObjectURL(file));
    })

</script>
